<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统管理抽屉</title>
    <link rel="stylesheet" href="https://unpkg.com/layui@2.8.18/dist/css/layui.css">
    <style>
        .drawer-content {
            height: 100vh;
            overflow-y: auto;
            padding: 20px;
            background: #f8f9fa;
        }
        
        .section-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .section-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 15px;
            padding-bottom: 8px;
            border-bottom: 2px solid #1890ff;
        }
        
        .current-host {
            background: #e6f7ff;
            border: 1px solid #91d5ff;
            padding: 10px;
            border-radius: 4px;
            margin-bottom: 15px;
        }
        
        .host-item, .dir-item {
            background: #fafafa;
            border: 1px solid #e8e8e8;
            padding: 12px;
            margin-bottom: 10px;
            border-radius: 4px;
            position: relative;
        }
        
        .host-item:hover, .dir-item:hover {
            background: #f0f0f0;
            border-color: #1890ff;
        }
        
        .item-actions {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
        }
        
        .host-info {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            font-size: 12px;
            color: #666;
        }
        
        .memo-textarea {
            min-height: 120px;
            resize: vertical;
        }
        
        .form-row {
            display: flex;
            gap: 10px;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .form-row label {
            width: 80px;
            text-align: right;
            flex-shrink: 0;
        }
        
        .form-row input {
            flex: 1;
        }
    </style>
</head>
<body>
    <div class="layui-container" style="margin-top: 50px;">
        <button type="button" class="layui-btn layui-btn-primary" id="openDrawer">
            <i class="layui-icon layui-icon-set"></i> 打开系统管理
        </button>
    </div>

    <script src="https://unpkg.com/layui@2.8.18/dist/layui.js"></script>
    <script>
        layui.use(['layer', 'form', 'table'], function(){
            var layer = layui.layer;
            var form = layui.form;
            var $ = layui.$;

            // 数据存储
            var hosts = JSON.parse(localStorage.getItem('hosts') || '[]');
            var directories = JSON.parse(localStorage.getItem('directories') || '[]');
            var currentHost = localStorage.getItem('currentHost') || '未连接';
            var memo = localStorage.getItem('memo') || '';

            // 保存数据到本地存储
            function saveData() {
                localStorage.setItem('hosts', JSON.stringify(hosts));
                localStorage.setItem('directories', JSON.stringify(directories));
                localStorage.setItem('currentHost', currentHost);
                localStorage.setItem('memo', memo);
            }

            // 打开抽屉
            document.getElementById('openDrawer').onclick = function() {
                layer.open({
                    type: 1,
                    title: false,
                    closeBtn: 1,
                    area: ['400px', '100%'],
                    shade: 0.3,
                    offset: 'r',
                    anim: 2,
                    content: getDrawerContent(),
                    success: function(layero, index) {
                        initDrawer();
                        form.render();
                    }
                });
            };

            // 获取抽屉内容
            function getDrawerContent() {
                return `
                <div class="drawer-content">
                    <!-- 主机管理 -->
                    <div class="section-card">
                        <div class="section-title">
                            <i class="layui-icon layui-icon-service"></i> 主机管理
                        </div>
                        <div class="current-host">
                            <strong>当前主机：</strong><span id="currentHostName">${currentHost}</span>
                        </div>
                        <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="addHost">
                            <i class="layui-icon layui-icon-add-1"></i> 添加主机
                        </button>
                        <div id="hostList"></div>
                    </div>

                    <!-- 常用目录 -->
                    <div class="section-card">
                        <div class="section-title">
                            <i class="layui-icon layui-icon-file"></i> 常用目录
                        </div>
                        <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="addDir">
                            <i class="layui-icon layui-icon-add-1"></i> 添加目录
                        </button>
                        <div id="dirList"></div>
                    </div>

                    <!-- 备忘录 -->
                    <div class="section-card">
                        <div class="section-title">
                            <i class="layui-icon layui-icon-note"></i> 备忘录
                        </div>
                        <textarea class="layui-textarea memo-textarea" id="memoText" placeholder="在此记录临时内容...">${memo}</textarea>
                        <button type="button" class="layui-btn layui-btn-sm" id="saveMemo" style="margin-top: 10px;">
                            <i class="layui-icon layui-icon-ok"></i> 保存备忘
                        </button>
                    </div>
                </div>
                `;
            }

            // 初始化抽屉
            function initDrawer() {
                renderHostList();
                renderDirList();
                bindEvents();
            }

            // 渲染主机列表
            function renderHostList() {
                var html = '';
                hosts.forEach(function(host, index) {
                    html += `
                    <div class="host-item" data-index="${index}">
                        <div style="margin-bottom: 8px;">
                            <strong>${host.name}</strong>
                            <span class="item-actions">
                                <button class="layui-btn layui-btn-xs layui-btn-normal apply-host">应用</button>
                                <button class="layui-btn layui-btn-xs test-host">测试</button>
                                <button class="layui-btn layui-btn-xs edit-host">编辑</button>
                                <button class="layui-btn layui-btn-xs layui-btn-danger delete-host">删除</button>
                            </span>
                        </div>
                        <div class="host-info">
                            <div>IP: ${host.ip}</div>
                            <div>端口: ${host.port}</div>
                            <div>用户: ${host.username}</div>
                            <div>路径: ${host.path}</div>
                        </div>
                    </div>
                    `;
                });
                $('#hostList').html(html);
            }

            // 渲染目录列表
            function renderDirList() {
                var html = '';
                directories.forEach(function(dir, index) {
                    html += `
                    <div class="dir-item" data-index="${index}">
                        <div>
                            <strong>${dir.alias}</strong>
                            <span class="item-actions">
                                <button class="layui-btn layui-btn-xs layui-btn-normal jump-dir">跳转</button>
                                <button class="layui-btn layui-btn-xs edit-dir">编辑</button>
                                <button class="layui-btn layui-btn-xs layui-btn-danger delete-dir">删除</button>
                            </span>
                        </div>
                        <div style="font-size: 12px; color: #666; margin-top: 5px;">${dir.path}</div>
                    </div>
                    `;
                });
                $('#dirList').html(html);
            }

            // 绑定事件
            function bindEvents() {
                // 添加主机
                $(document).on('click', '#addHost', function() {
                    showHostForm();
                });

                // 编辑主机
                $(document).on('click', '.edit-host', function() {
                    var index = $(this).closest('.host-item').data('index');
                    showHostForm(hosts[index], index);
                });

                // 删除主机
                $(document).on('click', '.delete-host', function() {
                    var index = $(this).closest('.host-item').data('index');
                    layer.confirm('确定删除此主机配置？', function(confirmIndex) {
                        hosts.splice(index, 1);
                        saveData();
                        renderHostList();
                        layer.close(confirmIndex);
                    });
                });

                // 应用主机
                $(document).on('click', '.apply-host', function() {
                    var index = $(this).closest('.host-item').data('index');
                    currentHost = hosts[index].name;
                    $('#currentHostName').text(currentHost);
                    saveData();
                    layer.msg('已应用主机：' + currentHost);
                });

                // 测试连接
                $(document).on('click', '.test-host', function() {
                    var index = $(this).closest('.host-item').data('index');
                    var host = hosts[index];
                    layer.msg('正在测试连接...', {icon: 16, time: 1000});
                    setTimeout(function() {
                        // 模拟测试连接
                        var success = Math.random() > 0.3; // 70% 成功率
                        if (success) {
                            layer.msg('连接测试成功！', {icon: 1});
                        } else {
                            layer.msg('连接测试失败！', {icon: 2});
                        }
                    }, 1000);
                });

                // 添加目录
                $(document).on('click', '#addDir', function() {
                    showDirForm();
                });

                // 编辑目录
                $(document).on('click', '.edit-dir', function() {
                    var index = $(this).closest('.dir-item').data('index');
                    showDirForm(directories[index], index);
                });

                // 删除目录
                $(document).on('click', '.delete-dir', function() {
                    var index = $(this).closest('.dir-item').data('index');
                    layer.confirm('确定删除此目录？', function(confirmIndex) {
                        directories.splice(index, 1);
                        saveData();
                        renderDirList();
                        layer.close(confirmIndex);
                    });
                });

                // 跳转目录
                $(document).on('click', '.jump-dir', function() {
                    var index = $(this).closest('.dir-item').data('index');
                    var dir = directories[index];
                    layer.msg('跳转到：' + dir.path, {icon: 1});
                    // 这里可以添加实际的跳转逻辑
                });

                // 保存备忘录
                $(document).on('click', '#saveMemo', function() {
                    memo = $('#memoText').val();
                    saveData();
                    layer.msg('备忘录已保存', {icon: 1});
                });

                // 实时保存备忘录
                $(document).on('input', '#memoText', function() {
                    memo = $(this).val();
                    saveData();
                });
            }

            // 显示主机表单
            function showHostForm(host, index) {
                var title = host ? '编辑主机' : '添加主机';
                var formData = host || {name: '', ip: '', port: '22', username: '', password: '', path: '/'};
                
                layer.open({
                    type: 1,
                    title: title,
                    area: ['450px', 'auto'],
                    content: `
                    <form class="layui-form" style="padding: 20px;">
                        <div class="form-row">
                            <label>主机名：</label>
                            <input type="text" name="name" value="${formData.name}" class="layui-input" required lay-verify="required">
                        </div>
                        <div class="form-row">
                            <label>IP地址：</label>
                            <input type="text" name="ip" value="${formData.ip}" class="layui-input" required lay-verify="required">
                        </div>
                        <div class="form-row">
                            <label>端口：</label>
                            <input type="text" name="port" value="${formData.port}" class="layui-input" required lay-verify="required">
                        </div>
                        <div class="form-row">
                            <label>用户名：</label>
                            <input type="text" name="username" value="${formData.username}" class="layui-input" required lay-verify="required">
                        </div>
                        <div class="form-row">
                            <label>密码：</label>
                            <input type="password" name="password" value="${formData.password}" class="layui-input" required lay-verify="required">
                        </div>
                        <div class="form-row">
                            <label>初始路径：</label>
                            <input type="text" name="path" value="${formData.path}" class="layui-input" required lay-verify="required">
                        </div>
                        <div style="text-align: center; margin-top: 20px;">
                            <button type="submit" class="layui-btn" lay-submit lay-filter="hostForm">确定</button>
                            <button type="button" class="layui-btn layui-btn-primary" onclick="layer.closeAll()">取消</button>
                        </div>
                    </form>
                    `,
                    success: function() {
                        form.on('submit(hostForm)', function(data) {
                            var hostData = data.field;
                            if (typeof index !== 'undefined') {
                                hosts[index] = hostData;
                            } else {
                                hosts.push(hostData);
                            }
                            saveData();
                            renderHostList();
                            layer.closeAll();
                            layer.msg(title + '成功', {icon: 1});
                            return false;
                        });
                    }
                });
            }

            // 显示目录表单
            function showDirForm(dir, index) {
                var title = dir ? '编辑目录' : '添加目录';
                var formData = dir || {alias: '', path: ''};
                
                layer.open({
                    type: 1,
                    title: title,
                    area: ['400px', 'auto'],
                    content: `
                    <form class="layui-form" style="padding: 20px;">
                        <div class="form-row">
                            <label>别称：</label>
                            <input type="text" name="alias" value="${formData.alias}" class="layui-input" required lay-verify="required" placeholder="给目录起个好记的名字">
                        </div>
                        <div class="form-row">
                            <label>路径：</label>
                            <input type="text" name="path" value="${formData.path}" class="layui-input" required lay-verify="required" placeholder="/home/user/documents">
                        </div>
                        <div style="text-align: center; margin-top: 20px;">
                            <button type="submit" class="layui-btn" lay-submit lay-filter="dirForm">确定</button>
                            <button type="button" class="layui-btn layui-btn-primary" onclick="layer.closeAll()">取消</button>
                        </div>
                    </form>
                    `,
                    success: function() {
                        form.on('submit(dirForm)', function(data) {
                            var dirData = data.field;
                            if (typeof index !== 'undefined') {
                                directories[index] = dirData;
                            } else {
                                directories.push(dirData);
                            }
                            saveData();
                            renderDirList();
                            layer.closeAll();
                            layer.msg(title + '成功', {icon: 1});
                            return false;
                        });
                    }
                });
            }

            // 初始化一些示例数据（仅在第一次使用时）
            if (hosts.length === 0) {
                hosts = [
                    {
                        name: '开发服务器',
                        ip: '192.168.1.100',
                        port: '22',
                        username: 'developer',
                        password: '******',
                        path: '/var/www'
                    },
                    {
                        name: '生产服务器',
                        ip: '10.0.0.50',
                        port: '2222',
                        username: 'admin',
                        password: '******',
                        path: '/home/admin'
                    }
                ];
            }

            if (directories.length === 0) {
                directories = [
                    {alias: '项目根目录', path: '/var/www/project'},
                    {alias: '日志目录', path: '/var/log/nginx'},
                    {alias: '配置目录', path: '/etc/nginx'}
                ];
            }

            if (!memo) {
                memo = '这里可以记录一些临时内容...\n\n例如：\n- 待处理的任务\n- 重要的命令\n- 临时笔记';
            }

            saveData();
        });
    </script>
</body>
</html>